<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,
    	minimum-scale=1.0,user-scalable=no">
    	<script type="text/javascript" src="./bscroll.js" ></script>
    	<script type="text/javascript" src="./vue.js" ></script>
    	<script type="text/javascript" src="./autoMenuGoods.js" ></script>
    	<link rel="stylesheet" href="autoMenu.css" />
		<title> 饿了么-联动菜单</title>
	</head>
	<body>
		<div id="app">
		<h2 class="title">饿了么-联动菜单</h2>
		<div class="shop-detail">
			<span>我是店铺详情</span>
		</div>
		<div  class="wrapper">
			<div class="menu-wrapper" ref="menu">
				<ul>
					<li v-for="(item,index) in goods" @click="selectMenu(index)" :class="{'current':currentIndex==index}" class="menu-item">
						<span class="text">{{item.name}}</span>
					</li>
				</ul>
			</div>
			<div class="food-wrapper" ref="food">
				<ul>
					<li v-for="(item,index) in goods" class="food-list-hook">
						<h4 class="header">{{item.name}}</h4>
						<ul >
							<li class="food-item" v-for="food in item.foods">
								<div class="text">{{food.name}}</div>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
		<div class="footer">
			<h2 class="text">我是购物车</h2>
		</div>
		</div>
	</body>
    <script type="text/javascript" src="autoMenu.js" ></script>
</html>
